<template>
    <div ref="viewerDivRef" class="cesium-container">
        <div ref="creditDivRef" style="display: none"></div>
    </div>
</template>

<script setup lang="ts" name="MapCesium">
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as marios from "sfx-marios";

// The URL on your server where CesiumJS's static files are hosted.
window.CESIUM_BASE_URL = "cesium";

const viewerDivRef = ref<HTMLDivElement>();
const creditDivRef = ref<HTMLDivElement>();

// 令牌
// Your access token can be found at: https://ion.cesium.com/tokens.
// This is the default access token from your ion account
Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxOTE3NzA4Ny04MThiLTQwMzgtODE4Ni1mZWU5N2ZiYTBhZWMiLCJpZCI6MTU5MTYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjkxNTI3MTl9.go1ZA9NegvqwBjzaHLh_4vovgsM7ZJudVDA3HEnMVPw";

/**
 * 初始化 Cesium
 */
async function initCesium() {
    // TileMapServiceImageryProvider.fromUrl
    const viewer = new Cesium.Viewer(viewerDivRef.value as HTMLElement, {
        animation: false, // 左下角的动画控件的显示
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        shouldAnimate: false, //控制模型动画
        timeline: false,
        fullscreenButton: false,
        creditContainer: creditDivRef.value as HTMLElement, // 信用标记
    });

    // let x = viewer.creditDisplay;
    // let y = new Cesium.Credit("123")
    // x.addCredit(y)

    // Add Cesium OSM Buildings, a global 3D buildings layer.
    // const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    // viewer.camera.flyTo({
    //     destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
    //     orientation: {
    //         heading: Cesium.Math.toRadians(0.0),
    //         pitch: Cesium.Math.toRadians(-15.0),
    //     }
    // });
}

async function initMarios() {
    // const map = new marios.Map3D(viewerDivRef.value as HTMLElement);
    const map = marios.Map3D.Create(viewerDivRef.value as HTMLElement); // CreateInstance
    map.imageryLayers.addImageryProvider(await Cesium.IonImageryProvider.fromAssetId(3845));

    // marios.Map3D.createSkyBox
}

// onMounted(initCesium);
onMounted(initMarios);
</script>

<style scoped lang="scss">
.cesium-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>
